<template>
    <div class="full">
        <es-scroll ref="scroll" :scroll-y="true" :upperThreshold="90" @pullDownRefresh="getList(true)">
            <div class="user-list">
                <div class="user-list__item" v-for="(item, index) in list" :key="index">
                    <img class="avatar" :src="item.avatar" alt="">
                    <div class="info">
                        <div class="name">{{item.name}}</div>
                        <div class="date">{{item.date}}</div>
                    </div>
                </div>
            </div>
        </es-scroll>
    </div>
</template>
<script>
import { listApi } from '@/api'
export default {
    data() {
        return {
            list: [],
            page: 1,
            size: 10,
            more: true
        }
    },
    methods: {
        getList(init) {
            if (init) {
                this.page = 1
                this.more = true
            }
            let params = {
                page: this.page,
                size: this.size
            }
            listApi.getList(params).then(res => {
                if (res.code === 200) {
                    if (res.data.lists < this.size && this.page > 0) {
                        this.more = false
                    }
                    if (init) {
                        this.list = res.data.lists
                    } else {
                        this.list = this.list.concat(res.data.lists)
                    }
                    this.$nextTick(() => {
                        this.$refs.scroll.forceUpdate()
                    })
                }
            })
        }
    },
    mounted() {
        this.getList(true)
    }
}
</script>
<style lang="less">
.full {
    height: 100%;
}
.user-list {
    .user-list__item {
        display: flex;
        align-items: center;
        position: relative;
        padding: 10px 15px;
        &:after {
            position: absolute;
            display: block;
            content: '';
            left: 15px;
            right: 0;
            bottom: 0;
            border-bottom: 1px solid #dedede;
        }
        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
        .info {
            margin-left: 10px;
            .name {
                font-size: 14px;
                color: #000;
            }
            .date {
                font-size: 14px;
                color: #666;
            }
        }
    }
}
</style>
